<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>AR</title>
  <meta name="description" content="Augmented Reality • A-Frame">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <script src="../../../dist/aframe-master.js"></script>
  <script src="../../js/info-message.js"></script>
  <script src="https://unpkg.com/aframe-extras@3.3.0/dist/aframe-extras.min.js"></script>
  <script src="../../js/hide-on-enter-ar.js"></script>
  <script src="ar-shadows.js"></script>
  <script src="ar-hit-test.js"></script>
  <script src="pinch-scale.js"></script>
  <script src="background-gradient.js"></script>
</head>
<body>

<a-scene
  renderer="colorManagement: true;"
  webxr="optionalFeatures: hit-test, local-floor;"
  info-message="htmlSrc: #messageText">
  <a-assets>
    <!--
      Model source: https://sketchfab.com/3d-models/triceratops-d16aabe33dc24f8ab37e3df50c068265
      Model author: https://sketchfab.com/VapTor
      Model license: Sketcfab Standard
    -->
    <a-asset-item id="triceratops"
      src="https://cdn.aframe.io/examples/ar/models/triceratops/scene.gltf"
      response-type="arraybuffer"></a-asset-item>

    <a-asset-item id="reticle"
      src="https://cdn.aframe.io/examples/ar/models/reticle/reticle.gltf"
      response-type="arraybuffer"></a-asset-item>

    <img id="shadow" src="shadow.png"></img>
    <a-asset-item id="messageText" src="message.html"></a-asset-item>
  </a-assets>

  <a-entity
    id="sky"
    geometry="primitive: sphere; radius: 65;"
    material="shader: background-gradient; colorTop: black; colorMiddle: #757575; colorBottom: #757575; side: back"
    hide-on-enter-ar></a-entity>

  <a-entity
    position="0 0.5 0"
    camera="fov: 60"
    look-controls="magicWindowTrackingEnabled: false; touchEnabled: false; mouseEnabled: false">
  </a-entity>

  <a-entity
    id="dino"
    position="0.3 0 -3.4"
    pinch-scale>
    <a-entity
      scale="0.01 0.01 0.01"
      position="0 0 0" rotation="0 -50 0"
      gltf-model="#triceratops"
      animation-mixer
      shadow="cast: true; receive: false">
        <a-entity
          position="0 0.1 0"
          rotation="-90 0 0"
          scale="16 32 0"
          geometry="primitive: plane; width: 30.0; height: 30.0";
          material="color: red; src: #shadow; transparent: true; opacity: 0.40">
        </a-entity>
    </a-entity>

    <!-- This shadow-receiving plane is only visible in AR mode.-->
    <a-plane height="30" width="30" rotation="-90 0 0"
         shadow="receive: true"
         ar-shadows="opacity: 0.2"
         visible="false"></a-plane>
  </a-entity>

  <a-light
    id="light"
    position="-2 4 2"
    type="directional"
    light="castShadow: true;
      shadowMapHeight: 1024;
      shadowMapWidth: 1024;
      shadowCameraLeft: -7;
      shadowCameraRight: 5;
      shadowCameraBottom: -5;
      shadowCameraTop: 5;
      intensity: 0.5"
    target="dino">
  </a-light>

  <a-entity light="type: hemisphere; intensity: 1"></a-entity>

  <a-entity
    gltf-model="#reticle"
    scale="0.8 0.8 0.8"
    ar-hit-test></a-entity>
</a-scene>
</body>
</html>
